<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src="js/vue.js"></script>
    <script src="js/jquery3.6.js"></script>
    <script src="js/jquery.form.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <link rel="stylesheet" href="css/form.css">
</head>
<body>
<div class="big-box" id="box">
    <div class="box">
        <div>{{ nowDate + ' ' + nowTime}}</div>
        <div class="hat">系统登录</div>
        <form  class="form-add" id="commentForm">
            <div>
                <input name="account" placeholder="用户名" class="xakil account" v-model="account">
            </div>
            <div>
                <input name="password" type="password" placeholder="密码" class="xakil password" v-model="password">
            </div>
            <div class="yzg-div">
                <img src="ImageServlet" alt="无法获取验证码" onclick="resetCode(this)" class="yzm">
                <input type="text" placeholder="验证码" class="xakil aas" name="bilal" v-model="iden" >
            </div>
            <div>
                <button style="width: 100%" class="btn" @click="sub">登录</button>
            </div>
            <div class="q1">
                <p><a href="#" >注册</a></p>
            </div>
        </form>
    </div>

</div>
</body>
<script>
    //判断表单是否为空
    $().ready(function () {
        // 在键盘按下并释放及提交后验证提交表单
        $("#commentForm").validate({
            rules: { // 规则 key:value等形式，key是要添加规则的name值
                account: {
                    required: true // required 必须的
                },
                password:{
                    required: true,
                    minlength:6
                },
                bilal:{
                    required: true,
                    maxlength:4
                }
            },
            messages: { // 定义提示信息
                account: "输入用户名",
                password:{
                    required:"输入密码",
                    minlength:"不能少于6位"
                },
                bilal:{
                    required:"请输入验证码",
                    maxlength:"不能大于4位"
                }
            },
            submitHandler:function (form) { // 设置其他提交表单的方式
                $(form).ajaxSubmit(function (data) { // 成功回调函数
                    if(data=="1"){
                        alert("验证码错误")
                    }
                    if(data=="2"){
                        alert("帐号或密码错误")
                    }
                    if(data=="3"){
                        location.href="index.html";
                    }
                });
            }
        })
    });

    const vue = {
        data(){
            return{
                account:null,
                password:null,
                iden:null,
                judge:null,
                json:[],
                nowDate: "", // 当前日期
                nowTime: "", // 当前时间
                nowWeek: "", // 当前星期
                dialogTableVisible: false,
                time:null
            }
        },
        mounted() {
            this.currentTime();
        },
        methods:{
            sub:function () {
                var json = this.json;
                if ($(".account").val() != "" && $(".password").val()!= "" && $(".aas").val() != ""){
                    if (/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/.test($(".password").val())){
                        //判断验证码
                        json = login("VerCode",this.account,this.password,this.iden);
                        console.log(json.VerCode)
                        if (json.VerCode == false){
                            return alert("验证码错误")
                        }else {
                            this.time = this.nowDate + ' ' + this.nowTime
                            //登录
                            json = login("login",this.account,this.password,this.iden,this.time);
                            console.log(json)
                            if (json.login == "账号或密码输入错误"){
                                alert("账号或密码输入错误")
                            }else {
                                location.href="buba/index.html";
                            }
                        }
                    }else
                        alert("密码格式不对")
                }
            },
            currentTime() {
                setInterval(this.getDate, 500);
            },
            getDate() {
                var _this = this;
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth() + 1;
                let dd = new Date().getDate();
                let week = new Date().getDay();
                let hh = new Date().getHours();
                let ms =
                    new Date().getSeconds() < 10
                        ? "0" + new Date().getSeconds()
                        : new Date().getSeconds();
                let mf =
                    new Date().getMinutes() < 10
                        ? "0" + new Date().getMinutes()
                        : new Date().getMinutes();
                if (week == 1) {
                    this.nowWeek = "星期一";
                } else if (week == 2) {
                    this.nowWeek = "星期二";
                } else if (week == 3) {
                    this.nowWeek = "星期三";
                } else if (week == 4) {
                    this.nowWeek = "星期四";
                } else if (week == 5) {
                    this.nowWeek = "星期五";
                } else if (week == 6) {
                    this.nowWeek = "星期六";
                } else {
                    this.nowWeek = "星期日";
                }
                _this.nowTime = hh + ":" + mf + ":" + ms;
                _this.nowDate = yy + "-" + mm + "-" + dd;
            },
        },
        beforeDestroy() {
            if (this.getDate) {
                console.log("销毁定时器");
                clearInterval(this.getDate); // 在Vue实例销毁前，清除时间定时器
            }
        }
    }
    let app = Vue.createApp(vue).mount("#box")


    function login(e,account,password,iden,tima) {
        let json1;
        $.ajax({
            type:"post",
            url: "LoginServlet?flag="+e,
            data: {
                "account":account,"password":password,"iden":iden,"tima":tima
            },
            dataType:"json",
            async:false,
            success:function (json){
                json1 = json;
            }
        })
        return json1;
    }


    /**
     * 点击验证码刷新
     * @param el
     */
    function resetCode(el){
        el.src = "ImageServlet?" + Math.random();
    }

</script>
</html>

